<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      请输入你的名字:<input type="text" v-model="users.name">
      <h1>{{users}}</h1>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            users:{
                name:''
            }
        },
        methods: {
            
        },
        /* 监听器 */
        watch:{
            /* 第一种方式  监听整个对象 每个属性值变化 都会执行handler*/
            // users:{
            //     /* handler就是原来的监听函数  当数据变化的时候  使用它 */
            //     handler(news,old){
            //             // console.log(news.name,old.name);
            //             console.log(news.name,old);
            //     },
            //     /* 代表watch里面申明的一次  理解为进入页面 就执行监听函数handler */
            //     immediate:true,
            //     /* 属性代表是否深度监听 属性默认为false  当值为true的时候 会对对象的每个属性进行监听 */
            //     deep:true
            // }

           /* 第二种方式  监听对象的的某一个属性*/
           'users.name' (news,old) {
               console.log(news,old);
           }

        }
    });
    
    
    </script>
</body>
</html>